<template>
	<div>
		<!-- 轮播区域 -->
		<div class="swiper banner-swiper">
		 <ul class="swiper-wrapper">
		        <li class="swiper-slide">
					<img src="../../../assets/img/swiper3.jpeg" />
				</li>
		        <li class="swiper-slide">
					<img src="../../../assets/img/swiper1.jfif.png" />
				</li>
		        <li class="swiper-slide">
					<img src="../../../assets/img/swiper2.jfif.png" />
				</li>
			</ul>
		    <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
		</div>
	</div>
</template>

<script>
import {onMounted} from 'vue'
//2.引入swiper动态组件
import Swiper ,{
	Autoplay,
	EffectCoverflow,
	EffectCube,
	Pagination
} from 'swiper'
//3.说明swiper组件应用配置
Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
export default{
	name : 'Swipers',
	// data(){
		
	// },
	setup(){
		onMounted(	()=>{
			new Swiper('.banner-swiper',{
				//循环播放
				loop:true,
				//设置分页器效果
				pagination :{
					el:'.swiper-pagination'
				},
				//设置播放项：时间，不停止   手指经过不暂停自动
				autoplay :{
					delay: 3000,
					stopOnLastSlide: false,
					disableOnInteraction: true,
				}
			})
		})
	}
}	


</script>

<style>
.banner-swiper{
		width: 100%;
		height: 5rem;
	}
	.banner-swiper img{
		width: 100%;
	}
	/* 穿透 */
	.swiper-pagination :deep(.swiper-pagination-bullet-active){
		background-color:white;
	}
</style>
